
<script>
// 编辑组件左侧
export default {
  name: 'CardEditLeftSider',
  props: {
    fieldList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
};
</script>
<template>
  <div class="datav-edit-left">
    <div class="card-edit-sheet">
      <Menu
        width="200px"
        active-name="1">
        <MenuGroup title="工作表">
          <MenuItem
            name="1"
            title="查看数据"> 网站订单分析
          <Icon
            type="loop"
            title="切换工作表"
            class="sheet-toggle-icon"></Icon>
          </MenuItem>
        </MenuGroup>
      </Menu>
    </div>
    <div class="card-edit-field">
      <Tabs type="line">
        <TabPane label="字段">
          <ul class="sheet-field-list">
            <li
              v-for="(item,index) in fieldList"
              :key="index">{{ item.value }}</li>
          </ul>
        </TabPane>
        <TabPane label="分析">
          <Collapse :class="{'analysis-host':true}">
            <Panel>
              <span>常用计算</span>
              <div slot="content">
                <ul class="analysis-list">
                  <li>汇总</li>
                  <li>指标汇总</li>
                  <li>累计</li>
                  <li>同期、环期</li>
                  <li>排名</li>
                </ul>
              </div>
            </Panel>
            <Panel>
              <span>模型</span>
              <div slot="content">
                <ul class="analysis-list">
                  <li>趋势线</li>
                  <li>预测</li>
                  <li>群集</li>
                </ul>
              </div>
            </Panel>
            <Panel>
              <span>其他</span>
              <div slot="content">
                <ul class="analysis-list">
                  <li>钻取</li>
                  <li>旋转</li>
                  <li>切片</li>
                </ul>
              </div>
            </Panel>
            <Panel>
              <span>自定义</span>
              <div slot="content">
                <ul class="analysis-list">
                  <li>参考线</li>
                  <li>参考区间</li>
                </ul>
              </div>
            </Panel>
          </Collapse>
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>


<style lang="less" scoped>
.card-edit-sheet {
  border-bottom: 1px solid #dddddd;
  .sheet-toggle-icon {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 18px;
    &:hover {
      color: #666666;
    }
  }
}

.sheet-field-list {
  margin: 0 3px;
  > li {
    height: 28px;
    line-height: 28px;
    padding: 2px 10px;
    transition: all 0.3s ease;
    cursor: pointer;
    &:hover {
      background-color: #e8e8e8;
    }
  }
}

.card-edit-field {
  margin: 10px 5px 0 5px;
}

.analysis-host {
  font-weight: bold;
}

.analysis-host /deep/ .k-collapse-content-box {
  padding-top: 0;
}

.analysis-list {
  list-style: none;
  > li {
    height: 28px;
    line-height: 28px;
    padding: 2px 10px;
    transition: all 0.3s ease;
    cursor: pointer;
    &:hover {
      background-color: #e8e8e8;
    }
  }
}

.k-menu-light {
  background-color: #e8ebed;
}
</style>
